
<template>
  <div>
    <!-- v-for 语法 循环渲染结构-->
    <!-- 要循环渲染谁 就把v-for 写在哪个标签上 -->
    <ul>
      <li :key='index' v-for="(item,index) in arr">{{index}}---{{item}}</li>
    </ul>

    <p v-for ="(value,key) in obj" :key="key">{{key}}---{{value}}></p>
    <!-- vue 支持直接写数字来渲染 表示渲染n个元素 循环遍历就是序号从1开始 -->
    <ul>
      <li v-for="(item,index) in 10" :key="index">{{index}}---我是第{{item}}个li></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'VueApp',

  data() {
    return {
      arr:['打球','唱歌','跳舞'],
      obj:{
        name:'66',
        age:'55'
      }
    };
  },



};
</script>

<style>

</style>